<!DOCTYPE html>

<head>
  <title>出刀记录</title>
  <meta name='viewport' content='width=1485' charset="utf-8" />
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/theme-chalk/index.css">
  <style>
    .el-table td,
    .el-table th {
      text-align: center;
    }
    .el-popover {
      white-space: pre-wrap;
    }
    .digit6{
      color:blue;
    }
    .digit7{
      color:green;
    }
    .digit8{
      color:orange;
    }
    .digit9{
      color:red;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-page-header @back="location='..'" content="出刀记录"></el-page-header>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleTitleSelect">
      <el-menu-item index="1">面板</el-menu-item>
      <el-menu-item index="2">预约</el-menu-item>
      <el-menu-item index="3">查刀</el-menu-item>
      <el-menu-item index="4">统计</el-menu-item>
      <el-menu-item index="5">我的</el-menu-item>
    </el-menu>
    <h1 style="text-align:center">出刀记录</h1>
    <el-date-picker v-model="reportDate" type="date" placeholder="选择日期" @change="report_day"></el-date-picker>
    <el-button type="primary" @click="selectUnfinished">选中未完成</el-button>
    <el-button type="warning" @click="sendRemindVisible = true">提醒出刀</el-button>
    <el-dialog title="警告" :visible.sync="sendRemindVisible">
      <p>您确定要向[[ multipleSelection.length ]]名成员发送提醒吗</p>
      <el-form>
        <el-form-item label="提醒类型" label-width="120">
          <el-radio-group v-model="send_via_private">
            <el-switch v-model="send_via_private" active-text="私聊消息" inactive-text="群聊消息"></el-switch>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sendRemindVisible = false">取消</el-button>
        <el-button type="danger" @click="sendRequest('send_remind'),sendRemindVisible = false">确定</el-button>
      </span>
    </el-dialog>
    <el-button type="danger" @click="dropMemberVisible = true">删除成员</el-button>
    <el-dialog title="警告" :visible.sync="dropMemberVisible">
      <p>您确定要删除这[[ multipleSelection.length ]]名成员吗</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dropMemberVisible = false">取消</el-button>
        <el-button type="danger" @click="sendRequest('drop_member'),dropMemberVisible = false">确定</el-button>
      </span>
    </el-dialog>
    <template v-if="progressData.length > 0">
      共[[ members.length ]]人，共[[ progressData.reduce((s,i)=>s+i.finished,0) ]]刀
      <a class="digit6">十万</a> <a class="digit7">百万</a> <a class="digit8">千万</a> <a class="digit9">亿</a>
      <el-button type="primary" @click="viewTails">尾刀一览</el-button>
      <el-dialog title="未完成的尾刀一览" :visible.sync="tailsDataVisible">
        <template v-if="tailsData.length > 0">
          <el-table :data="tailsData">
            <el-table-column prop="qqid" label="QQ号" width="120" sortable></el-table-column>
            <el-table-column prop="nickname" label="昵称" width="200" sortable></el-table-column>
            <el-table-column prop="boss" label="boss" width="80"></el-table-column>
            <el-table-column prop="damage" label="尾刀伤害" width="120" sortable>
              <template slot-scope="scope">[[ scope.row.damage.toLocaleString() ]]</template>
            </el-table-column>
            <el-table-column prop="message" label="留言"></el-table-column>
          </el-table>
        </template>
        <template v-else>
          没有尾刀
        </template>
      </el-dialog>
      <el-table :data="progressData" :span-method="arraySpanMethod" style="width: 1485" ref="multipleTable"
        @selection-change="handleSelectionChange" stripe>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="qqid" label="QQ号" width="120" sortable></el-table-column>
        <el-table-column prop="nickname" label="昵称" width="200" sortable></el-table-column>
        <el-table-column prop="finished" label="已完成" width="100" sortable></el-table-column>
        <el-table-column label="第一刀">
          <el-table-column label="尾刀" width="150">
            <template v-if="scope.row.detail[0]" slot-scope="scope">
              <a v-html="csummary(scope.row.detail[0])"></a>
              <el-popover placement="top" effect="light" trigger="hover">[[ cdetail(scope.row.detail[0]) ]]<i class="el-icon-info" slot="reference"></i></el-popover>
            </template>
          </el-table-column>
          <el-table-column label="剩余刀" width="150">
            <template v-if="scope.row.detail[1]" slot-scope="scope">
              <a v-html="csummary(scope.row.detail[1])"></a>
              <el-popover placement="top" effect="light" trigger="hover">[[ cdetail(scope.row.detail[1]) ]]<i class="el-icon-info" slot="reference"></i></el-popover>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="第二刀">
          <el-table-column label="尾刀" width="150">
            <template v-if="scope.row.detail[2]" slot-scope="scope">
              <a v-html="csummary(scope.row.detail[2])"></a>
              <el-popover placement="top" effect="light" trigger="hover">[[ cdetail(scope.row.detail[2]) ]]<i class="el-icon-info" slot="reference"></i></el-popover>
            </template>
          </el-table-column>
          <el-table-column label="剩余刀" width="150">
            <template v-if="scope.row.detail[3]" slot-scope="scope">
              <a v-html="csummary(scope.row.detail[3])"></a>
              <el-popover placement="top" effect="light" trigger="hover">[[ cdetail(scope.row.detail[3]) ]]<i class="el-icon-info" slot="reference"></i></el-popover>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="第三刀">
          <el-table-column label="尾刀" width="150">
            <template v-if="scope.row.detail[4]" slot-scope="scope">
              <a v-html="csummary(scope.row.detail[4])"></a>
              <el-popover placement="top" effect="light" trigger="hover">[[ cdetail(scope.row.detail[4]) ]]<i class="el-icon-info" slot="reference"></i></el-popover>
            </template>
          </el-table-column>
          <el-table-column label="剩余刀" width="150">
            <template v-if="scope.row.detail[5]" slot-scope="scope">
              <a v-html="csummary(scope.row.detail[5])"></a>
              <el-popover placement="top" effect="light" trigger="hover">[[ cdetail(scope.row.detail[5]) ]]<i class="el-icon-info" slot="reference"></i></el-popover>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="sl" label="SL" width="55" sortable>
          <template slot-scope="scope">
            <template v-if="today==-1">-</template>
            <template v-else>
              <i class="el-icon-smoking" :style="{color:(scope.row.sl==today?'#F56C6C':'#67C23A')}"></i>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="历史" width="55">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-time" @click="location='../'+scope.row.qqid+'/'"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button @click="viewInExcel" size="mini">在Excel中查看（测试功能）</el-button>
    </template>
    <template v-else>
      没有记录
    </template>
  </div>
  <footer style="text-align: center">
    powered by <a href="https://github.com/yuudi/yobot">yobot</a>
  </footer>
</body>
<script>var csrf_token = "{{ session['csrf_token'] }}";</script>
<script src="{{ url_for('yobot_static', filename='clan/progress.js') }}"></script>

</html>